<template>
  <div class="container" :class="theme">
  <slot></slot>
  <div class="component-wrap">
    <div class="videoAi-box datav-box">
      <h4>实时监控</h4>
      <div class="video">
        <div v-for="(item, index) in videoList" :key="index" class="video-list">
            <video-model :videoId="'aiVideo'+index" :src="decryptUrl(item)"></video-model>
            <!-- <video2 :videoId="'aiVideo'+index"  :poster="item.picurl" :url="decryptUrl(item.videourl)"></video2> -->
            <div class="zhe">{{item.projectname}}</div>
            <div class="name">{{item.videoname}}</div>
        </div>
      </div>
    </div>
    <div class="line"></div>
    <div class="videoAi-box datav-box">
      <h4>AI预警统计</h4>
      <div class="videoAi-con">
        <Echart id="rightTop" :options="options" style="height: 240px;"  ref="charts" />
        <div class="bottom-video">
            <el-carousel>
                <el-carousel-item v-for="(item, index) in aiImgList" :key="index">
                    <el-image :src="item.violationpic" style="width: 100%;height: 240px;" fit="cover"></el-image>
                    <div class="zhe">{{item.projectname}}-{{item.eventtype}}</div>
                </el-carousel-item>
            </el-carousel>
            
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import videoModel from '@/components/video/video.vue'
import video2 from '@/components/video/video2.vue';
import moment from 'moment';
import { filtTimeList } from '@/utils/utils';
import { mapGetters} from "vuex";
import { aesDecrypt } from '@/utils/utils'
export default{
  props:{
    theme:{
      type:String,
      default:''
    }
  },
  data(){
    return{
        videoList:[],
        aiImgList:[],
        timeList:[],
        aiwaningData:[],
        // echarts
        options:{},
        aiName:''
    }
  },
  components:{ videoModel,video2 },
  computed:{
    ...mapGetters(["projects"])
  },
  created(){
    this.timeList = filtTimeList(6)
    let today = moment().format('YYYY-MM-DD')
    // 视频监控（随机视频）
    this.$datav.VideoTwoList({projectid:this.projects}).then(res => {
        // this.videoList = res.data
        this.videoList = [
            {projectname:'中山大学广州校区南校园怡乐路教师公寓项目',videoname:'宿舍区域围墙',videourl:'https://open.ys7.com/v3/openlive/D76912914_3_2.m3u8?expire=1698051269&id=506148765300699136&t=8505f56576c33b5a3dba1cf3da541f9cda9d784e69b88c9ae898af99bb1e3875&ev=100'},
            {projectname:'中山大学广州校区南校园怡乐路教师公寓项目',videoname:'项目部人脸识别区域',videourl:'https://open.ys7.com/v3/openlive/D76912914_2_2.m3u8?expire=1698051224&id=506148577513312256&t=dc186aa83bcc2d8192c541ad016741dcbe56ab32467b8ec69ca5ff92104aef7f&ev=100'},
            {projectname:'中山大学广州校区南校园怡乐路教师公寓项目',videoname:'2号门右恻围',videourl:'https://open.ys7.com/v3/openlive/D76912914_12_2.m3u8?expire=1698051114&id=506148116206989312&t=463fd2dda6a4fbe4c81e85b69ba64c6570c34eab25b55b0b2af9d46f0ecd9bfd&ev=100'},
            {projectname:'中山大学广州校区南校园怡乐路教师公寓项目',videoname:'宿舍区域女卫门口',videourl:'https://open.ys7.com/v3/openlive/D76912914_1_2.m3u8?expire=1698051144&id=506148241297907712&t=b4ee07e74f436b2b7249db4f49f121747e6c22de3cb7e7dd73fe3186d7a8627f&ev=100'},
        ]
    })
    // ai监测图片
    this.$datav.aiStatus({today,projectid:this.projects}).then(res => {
        this.aiImgList = res.data
        this.aiName = this.aiImgList.length !== 0 ?  this.aiImgList[0].eventtime : ''
    })
    // ai预警统计
    this.$datav.aiWaning({start:moment().subtract(6,'day').format('YYYY-MM-DD'),end:today,projectid:this.projects}).then(res => {
        let arr = []
        this.timeList.map(item => {
          let obj = res.data.find(item1 => {
            return moment(item1.partitiondate).format("MM-DD") == item
          })
          if(obj){
            arr.push(obj.num * 1)
          }else{
            arr.push(0)
          }
        })
        this.aiwaningData = arr
        this.init()
    })
  },
  methods: {
    decryptUrl(url){
    //    return aesDecrypt(url.videourl)
        return url.videourl
    },
    changeImg(index){
        this.aiName = this.aiImgList[index].eventtime
    },
    init(){
    this.options = {
        grid:{
            left: '2%',
            right: '3%',
            top:'4%',
            bottom: '1%',
            containLabel: true
        },
        color: ['#2586F2', '#A7A7A7'],
        xAxis: [
            {
                type: 'category',
                data: this.timeList,
                axisLabel:{
                  color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                }
            }
        ],
        tooltip: {
          trigger: 'axis'
        },
        yAxis: [
            {
                type: 'value',
                axisLabel:{
                  color:this.theme === 'light' ? 'rgba(0,0,0,0.8)' : 'rgba(255,255,255,0.8)'
                }
            }
        ],
        series: [
                {
                    type: 'line',
                    smooth: true,
                    data: this.aiwaningData
                }
            ]
        };
    },
  },
}
</script>

<style lang="scss" scoped>
.container{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 500px;
}
p{
    margin: 0;
    padding: 0;
}
.videoAi-box{
  .videoAi-con{
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .bottom-video{
    border: 1px solid rgba(255,255,255,.2);
    position: relative;
    margin-top: 12px;
    width: 100%;
       .zhe{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 24px;
        background: rgba(70, 70, 70, 0.65);
        color: #fff;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        padding-right: 10px;
        z-index: 99;
    }
    ::v-deep .el-carousel{
      .el-carousel__container{
        height: 240px !important;
      }
        .el-carousel__indicators{
            display: none;
        }
    }
  }
}
.line{
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 28px;
}

.video{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .video-list{
    height: 200px;
    width: 220px;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,.2);
    position: relative;
    .el-image{
        width: 100%;
        height: 100%;
    }
    .zhe{
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 24px;
        background: rgba(70, 70, 70, 0.65);
        color: #fff;
        text-align: center;
        line-height: 24px;
        font-size: 12px;
        padding-right: 10px;
    }
    .name{
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 12px;
      color: rgba(255,255,255,0.3);
      line-height: 26px;
    }
  }
}

.light{
  .video{
    .video-list{
      height: 170px;
      width: 202px;
    }
  }
}
</style>